import React , { Component } from "react";

import Base from "./Base"
export default class DXDS extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[]
    }
    this.height = [];
 }
 componentDidMount(){
    for(var k in this.refs){
      this.height.push(this.refs[k].offsetHeight)
    }
 }
  baseinfo(){
    return [
      {name:"万位",key:"W"},
      {name:"千位",key:"Q"},
      {name:"百位",key:"B"},
      {name:"十位",key:"S"},
      {name:"个位",key:"G"},
      {name:"总和、龙虎和",key:"ZH"}
    ]
  }
 show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
 slicePeilv(index,content){
  let body = [] 
  content.map((item,i)=>{
      if(item.id.indexOf("DXDS-"+this.baseinfo()[index].key) > -1){
         body.push(item)
      }
   })
   return <Base {...this.props} content={body}></Base>
 }
  render(){
    const {content} = this.props;
    let baseinfo = this.baseinfo()
    let page = content.length / baseinfo.length
    
     return  <div className="panl">
{          this.baseinfo().map((item,index)=>{
            let isshow = this.state.isShow.indexOf(index)
            return  <div className="panel" key={index}>
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(index)
              }}>
                        <i className={isshow>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>

              </div>
              {item.name}
            </div>
            <div ref={index} className={isshow>-1 ? "panel_body  hidden" : "panel_body"}
             style={{"height":this.height[index] ?  this.height[index] : "auto"}}>
              {this.slicePeilv(index,content)}
             {/* <Base {...this.props} content={content.slice(index*page,(index+1)*page)}></Base> */}
            </div>
          </div>
          })
}
      </div>
 

  }
}